

export class Render {
    renderBanner(arr) {
        let html = '';
        for (let i = 0; i < arr.length; i++) {
            html += ` <div class="swiper-slide">
                            <div class="mask">
                               <a class="pic" href="">
                                  <img src="${arr[i].img_url}" alt="">
                               </a>
                               <div class="banner-btn">
                               <a class="add" href="">
                                   <i></i>
                                   <span>加入灵感集</span>
                               </a>
                               <a class="author" href="">
                                    <img src="${arr[i].author_img}" alt="">
                                    <span>${arr[i].author_name}</span> 
                               </a>
                               </div> 
                            </div>
                      </div>`
        }
        return html;
    }
    renderGoodsRec(arr) {
        let html = '';
        for (let i = 0; i < arr.length; i++) {
            html += ` <div class="goods-box">
                          <img src="${arr[i].img_url}"  alt="">
                          <div class="detials">
                              <div class="impression">
                                 ${arr[i].impression}
                              </div>
                              <div class="material">
                                  ${arr[i].material}
                              </div>
                              <div class="attribute">
                                 ${arr[i].attribute}
                              </div>
        
                          </div>
                      </div>`
        }
        return html;
    }
    renderGoodFloat(arr) {
        let html = "";
        for (let i = 0; i < arr.length; i++) {
            html += ` <div class="show-box">
                              <div class="pic" href="">
                                  <img src="${arr[i].img2_url}" 
                                  good_id="${arr[i].good_id}"
                                  price ="${arr[i].price}" alt="">
                              </div>
                              <div class="msg-box">
                                 <a class="brand-img" href="">
                                     <img src="${arr[i].brand_img}" alt="">
                                 </a>
                                 <a class="brand" href="">${arr[i].impression}</a>
                                 <p class="material">${arr[i].material}</p>
                                 <p class="price"><u>￥${arr[i].price}</u></p>
                                 <p class="size1">
                                    尺寸规格:<br>
                                   ${arr[i].size}
                                 </p>
                              </div>
                         </div>`
        }
        return html;
    }
    renderFashinerImg(arr) {
        let html = '';
        for (let i = 0; i < arr.length; i++) {
            html += `  <a class="pic" href="">
                         <img src="${arr[i].img_url}"  alt="">
                    </a>`
        }
        return html;
    }
    renderFashinerUser(arr) {
        let html = "";
        let first = "";
        for (let i = 0; i < arr.length; i++) {

            if (i == 0) {
                first = `<div class="user-display active">`
            }
            else {
                first = `<div class="user-display">`
            }
            html += ` ${first}
                         <div class="user-infor">
                             <a class="user-pic" href=""><img
                                     src="${arr[i].user_img}"
                                     alt=""></a>
                             <div class="txt">
                                 <a class="show-name" href="http://www.wutuojia.com/diy/1418.html"
                                     target="_blank">${arr[i].show_name}</a>
                                 <a class="user-name" href="">${arr[i].user_name} </a>
                                 <div class="detail">
                                     <a href="">
                                     ${arr[i].detail}
                                     </a>
                                 </div>
                             </div>
                         </div>
                      
                         <div class="user-work">
                             <a href="" class="pic"><img
                                     src=" ${arr[i].pic1_url}"
                                     alt=""><span>${arr[i].pic1_title}</span></a>
                             <a href="" class="pic"><img
                                     src="${arr[i].pic2_url}"
                                     alt=""><span>${arr[i].pic2_title}</span></a>
                             <a href="" class="pic"><img
                                     src="${arr[i].pic3_url}" alt="">
                                 <span>${arr[i].pic3_title}</span></a>
                             <a href="" class="pic"><img
                                     src="${arr[i].pic4_url}"
                                     alt=""><span>${arr[i].pic4_title}</span> </a>
                         </div>
                       </div>`
        }
        return html;

    }

    renderInspiration(arr) {
        let html = "";
        for (let i = 0; i < arr.length; i++) {
            html += `  <div class="ins-box">
                           <a class="pic" href=""><img
                                   src="${arr[i].big_img}" alt=""></a>
                           <a class="small-pic" href=""><img
                                   src="${arr[i].small_img}" alt=""></a>
                           <h3>
                               <a href="">${arr[i].title}</a>
                           </h3>
                           <p><a href="">${arr[i].text}</a></p>
                           <div class="like">
                               <i></i>
                               <span>${arr[i].like_count}</span>
                           </div>
                         </div>`
        }

        return html;
    }


    renderBannerTwo(arr) {
        let html = "";

        for (let i = 0; i < arr.length; i++) {
            let str = "";
            for (let k = 0; k < arr[i].products.length; k++) {
                str += `  <a class="pic-box" href="">
                            <img src="${arr[i].products[k].good_img}"
                                alt="">
                            <h2 class="pic-title">${arr[i].products[k].detail}</h2>
                            <span>￥${arr[i].products[k].price}</span>
                          </a>`
            }
            html += ` <div class="swiper-slide">
                            <div class="imgs-banner">
                                <div class="right-box">
                                  ${str}
                                </div>
                                <div class="middle-box">
                                    <a class="productor" href="">
                                        <img src="${arr[i].brand_img}"
                                            alt="">
                                        <p>${arr[i].brand}</p>
                                    </a>
                                    <h2>${arr[i].text1}</h2>
                                    <h4>${arr[i].text2}</h4>
                                </div>
                                <div class="left-box">
                                </div>
                            </div>
                         </div>`
        }

        return html;


    }

    renderDetails(arr) {
        let html = ` 
                     <div class="exzoom" id="exzoom">
                        <!--大图区域-->
                        <div class="exzoom_img_box">
                            <ul class='exzoom_img_ul'>
                               <li><img class="big-img" src="${arr.img_url}"/></li>
                             </ul>
                       </div>
                     </div>    
                     <div class="good-details-info">
                        <a class="brand-img" href="">
                            <img src="${arr.brand_img}" alt="">
                        </a>
                        <a class="brand" href="">${arr.impression}</a>
                        <p class="material">${arr.material}</p>
                       
                        <p class="size1">
                           尺寸规格:<br>
                           ${arr.size}
                        </p>
                    </div>  
                    <div class="good-details-buy">   
                      <p class="price">价格:<u>￥${arr.price}</u></p>
                      <button class="add-cart" good_id="${arr.good_id}" price="${arr.price}">加入购物车</button>
                    </div>`
        return html;
    }
    renderCartsList(arr){
        let ls = localStorage.getItem("carts");
        let la = JSON.parse(ls === null ? "[]" : ls);

        //对全部商品进行筛选;
        arr = arr.filter(goods_item =>{
            return la.some(carts_item =>{
                if(goods_item.good_id == carts_item.id){
                    goods_item.count = carts_item.count;
                    return true; //结束本层循环,留下这条商品数据
                }
            })
        })
    //    console.log(arr); 
      let html = "";
      
      arr.forEach(element => {
          html +=`<div class="good-item">
                     <img src="${element.img_url}" alt="">
                     <button class="btn  btn-reduce"  good_id="${element.good_id}">-</button>
                     <span>${element.count}</span>
                     <button class="btn  btn-add"  good_id="${element.good_id}">+</button>
                     <div class="carts-total-price">￥${ element.count * element.price }</div>
                  </div>`
         });
        return html;
    }

}
